<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- dean.edwards/2004 -->
<!-- keeping code tidy! -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>IE7 {CSS2: auto}</title>

 <!-- compliance patch for microsoft browsers -->
 <!--[if lt IE 7]>
 <script src="../ie7-standard-p.js" type="text/javascript"></script>
 <script src="../ie7-css3.js" type="text/javascript"></script>
 <![endif]-->

 <style type="text/css">

  div {

   background: silver;
   width: 200px;

  }

  #test1:hover > p {

   background: yellow;

  }

  #test2 p:hover + p {

   background: yellow;

  }

  input {

   background: red;

  }

  input + input {

   background: orange;

  }

  input + input + input {

   background: lime;

  }

  #test3 input:focus + input {

   background: yellow;

  }

  #test4 p:hover ~ p {

   background: yellow;

  }

  code {

   background-color: #eee;

  }

  code.box {

   display: block;
   margin: 1em 0em;
   padding: 1em;

  }

 </style>
</head>
<body>
 <script type="text/javascript" src="ie7-demo.js"></script>
 <h2>Dynamic Pseudo-Classes</h2>

 <p>The examples below seem slightly confusing. This is because an element&#8217;s
    style is influenced by dynamic pseudo-classes attached to adjacent elements.
    View the source of this document to fully understand these selectors.</p>

 <hr />

 <code class="box">
  #test1:hover > p {

   background: yellow;

  }
 </code>

 <div id="test1">
  <p>Here is a paragraph.</p>
  <p>And another.</p>
 </div>

 <hr />

 <code class="box">
  #test2 p:hover + p {

   background: yellow;

  }
 </code>

 <div id="test2">
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
 </div>

 <hr />

 <code class="box">
  #test3 input:focus + input {

   background: yellow;

  }
 </code>

 <div id="test3">
  <input type="text" value="input 1"/>
  <input type="text" value="input 2"/>
  <input type="text" value="input 3"/>
 </div>

 <hr />

 <code class="box">
  #test4 p:hover ~ p {

   background: yellow;

  }
 </code>

 <div id="test4">
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
  <p>Paragraph 5.</p>
  <p>Paragraph 5.</p>
  <p>Paragraph 6.</p>
 </div>

 <p>&lt;&nbsp;<a href="javascript:history.back()">back</a></p>
</body>
</html>
